<template>
  <view class="content">
    <view class="">
    	<c-navBar title="教练课时统计详情"></c-navBar>
    	<Filter :compList="compList" @startSearch="search" />
    </view>
   <view class="content-bottom-style">
   	<c-list
   	  class="detail-list"
   	  v-model:loading="loading"
   	  v-model:error="error" 
   	  v-model:finished="finished"
   	  error-text="请求失败，点击重新加载"
   	  @load="Loads"
   	>
   	  <view class="detail-card" v-for="item in detailList" :key="item.id">
   	    <view class="flex flex-sb flex-a">
   	      <view class="">
   	        <view class="flex flex-ab" style="margin-bottom: 16rpx">
   	          <view class="">
   	            <text
   	              >{{ item.day_time }}({{ item.start_time }}-{{
   	                item.end_time
   	              }})</text
   	            >
   	          </view>
   	          <view class="" style="margin-left: 54rpx">
   	            <text
   	              :class="{
   	                normal: item.plan_type === 1,
   	                purple: item.plan_type === 2,
   	                orange: item.plan_type === 3
   	              }"
   	              >{{ planType[item.plan_type] }}</text
   	            >
   	          </view>
   	        </view>
   	        <view class="flex flex-ab">
   	          <!-- <view class="">
   	            <van-icon :name="account" size="14px" />
   	            <text class="stu-name">梅李昕</text>
   	            <text class="type">（学生）</text>
   	          </view> -->
   	          <view class="">
   	            <text>{{ item.teacher.teacher_nickname }}</text>
   	            <text class="type">（教练）</text>
   	          </view>
   	        </view>
   	      </view>
   	      <view class="orange">
   	        <text style="font-size: 28rpx"
   	          >{{ classHours[item.plan_hour] }}小时</text
   	        >
   	      </view>
   	    </view>
   	  </view>
   	</c-list>
   </view>
  </view>
</template>

<script setup>
import account from "@/static/svgIcon/account.svg"
import { ref, reactive } from "vue"
import Filter from "../../components/filter/filter.vue"
import { getCurrentDate } from "@/utils"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { getTeacherPlanDetail } from "@/apis/coachManagement"
import { planType, classHours } from "@/utils/fieldMap"
const finished = ref(true)
const compList = ["keyword"]
const loading = ref(false)
const error = ref(false)
const queryParams = reactive({
  start_date: getCurrentDate(),
  end_date: getCurrentDate(),
  search_data: "",
  teacher_id: ""
})
const detailList = ref([])
onLoad((opt) => {
  queryParams.teacher_id = opt.teacher_id
})
onShow(() => {
  Loads()
})
const Loads = () => {
  getList()
}

const getList = () => {
  loading.value = true
  getTeacherPlanDetail(queryParams)
    .then((res) => {
      if (res.code === 1) {
        detailList.value = res.data
        loading.value = false
      } else {
        error.value = true
        loading.value = false
      }
    })
    .catch((err) => {
      error.value = true
      loading.value = false
    })
}
const search = ({ dateRange, keyword }) => {
  queryParams.start_date = dateRange[0] || ""
  queryParams.end_date = dateRange[1] || ""
  queryParams.search_data = keyword
  Loads()
}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}
	
	.content-bottom-style {
	
		width: 100%;
		flex: 1;
		overflow: hidden;
	}
.detail-list {
  padding: 0 20rpx 30rpx 20rpx;
}
.detail-card {
  padding: 16rpx 20rpx 20rpx 32rpx;
  border-radius: 5px;
  background: #ffffff;
  margin-bottom: 20rpx;
  border: 1px solid #ececec;
  font-size: 24rpx;
  color: #666;
  .stu-name,
  .type {
    color: #333;
    margin-left: 14rpx;
  }
  .type {
    font-size: 20rpx;
    margin-left: 0;
  }
}
</style>
